import Base from "../base.js";
import CinemasApi from "../../api/cinemas.js";
import _, { lowerFirst } from "lodash";

// 通过对象迭代生成影院数据
const cinemasProps = [
    {
        name: '影院名称',
        key: "name",
    },
    {
        name: '影院地址',
        key: "address",
    },
    {
        name: '联系电话',
        key: "phone",
    },
    {
        name: '价格',
        key: "price",
    },
    {
        name: '距离',
        key: "distance",
    },
    {
        name: '影院是否开启',
        key: "status",
    },
];

export default class extends Base {
    // 默认初始化数据
    data = {
        cinema: {
            _id: '',
            name: '嘉禾影城',
            address: '金牛区',
            phone: "13698547865",
            price: "33",
            distance: '10km',
            status: 'true',

        },
    };
    // 渲染基础页面
    render() {
        const { cinema } = this.data;
        this.$el.html(`
        <div>
            <div>
                <div style="margin-top:2px;">
                    <a href="/#/info/cinemas" style="font-size:16px; color:rgba(0,0,0,0.4);">影院信息</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                    <a href="/#/info/add-cinema" style="font-size:16px;">新增影院</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
                </div>
                <hr>
                <h1 style="margin:20px 40px;">新增影院</h1>
            </div>
         
            <table >
                <tbody>
                    ${cinemasProps.map(item => {
                        return `
                            <tr>
                                <div class="layui-form-item ">
                                    <label class="layui-form-label" style="width:100px;">${item.name}</label>
                                    <div class="layui-input-inline send">
                                        <input type="text" name="${item.key}" required lay-verify="required" value="${cinema[item.key]}"  autocomplete="off" class="layui-input" >
                                    </div>
                                </div>
                            </tr>
                            `}).join('')}
                            <tr>
                                <div class="layui-btn-container" style="margin-left:60px;">
                                    <button type="button" style="margin-left:72px;" class="layui-btn layui-btn-sm save-btn" name="save-btn">确认新增</button>
                                    <button type="button" class="layui-btn layui-btn-sm upload-btn" name="upload-btn">上传图片</button>
                                </div>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `)
    };

    // 页面跳转到图片上传
    upload() {
        // 跳转前 保存数据
        location.hash = `#/info/upload-imgs/${this.data.cinema._id}`;
    }
    // 保存按钮事件
    async add() {
        // 解构初始数据
        const { name, address, phone, price, distance, status, } = this.data.cinema;
        // 将解构后的数据作为CinemasApi中的add方法得参数
        const data = await CinemasApi.add({ name, address, phone, price, distance, status, });
        console.log(data);
        
        
        if (data) {
            // 将返回值赋值给this.data.cinema
            this.data.cinema = data;
            // 提示新增成功，
            layer.msg(`新增成功`, { icon: 1 });
        } else {
            layer.msg(`新增失败,该影院已存在`, { icon: 2 });
        }
    }
    // 绑定事件
    handle() {
        const { cinema } = this.data;
        _.map(cinema, (v, k) => {
            if (k == "_id") {
                return
            } else {
                $(`input[name="${k}"]`).on("input", e => {
                    cinema[k] = e.target.value;
                })
            }
        })
        // 确认新增按钮添加事件
        $('.save-btn').on('click', this.add.bind(this));
        $('.upload-btn').on('click', this.upload.bind(this));

    }
}
